<template>
	<div id="student_manage" class="container">
		<div class="content">
			<div class="title">{{title}}</div>
			<div class="nav_div">
				<div class="nav" :class="tab==1? 'nav_active':''" @click="tab=1">预备生管理(1564)</div>
				<div class="nav" :class="tab==2? 'nav_active':''" @click="tab=2">在校生管理(6354)</div>
				<div class="nav" :class="tab==3? 'nav_active':''" @click="tab=3">毕业/离园生(5548)</div>
			</div>
			
			<studentPrepare ref="studentPrepare" v-if="tab==1"></studentPrepare>
			<studentSchool ref="studentSchool" v-if="tab==2"></studentSchool>
			<studentGraduate ref="studentGraduate" v-if="tab==3"></studentGraduate>
		</div>
		
	</div>
</template>

<script>
import studentPrepare from './student_prepare';	
import studentSchool from './student_school';	
import studentGraduate from './student_graduate';	
	
var vm,dict;
export default {
	components : {
		studentPrepare,studentSchool,studentGraduate
	},
	data : function() {
		return {
			title : this.$route.name,
			tab : 1,
			//提供下拉框数据给子页面用
			schoolYearList : null,
			gradeList : null,
			classList : null,
		}
	},
	methods : {
		campusChange : function(){
			vm.loadList();
			let list = {"1": "studentPrepare", "2": "studentSchool", "3": "studentGraduate" };
			let componet = list[vm.tab];
			vm.$refs[componet].campusChange();
		},
		loadList : function() {
			let campusId = vm.$store.state.campusId;
			//加载学年列表
			api.schoolYearAll({campusId}).then(function(data) {
				vm.schoolYearList = data.list;
			});
			//加载年级列表
			api.gradeTypeAll({campusId}).then(function(data) {
				vm.gradeList = data.list;
			});
		}
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
		vm.loadList();
	}
}

</script>

<style lang="scss">
	#student_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
		
		.el-range-editor {
			padding: 0 0.05rem 0 0.1rem;
		    position: relative;
		    top: 0.01rem;
		}
		.el-range-separator {
			padding: 0 ;
			width : 10% ;
			line-height: 0.34rem;
			color: #666666;
		}
		.el-range-input {
			font-size: 0.16rem;
			color: #666666;
			height: 0.3rem;
		    position: relative;
		    top: 0.01rem;
		}
	}
</style>

<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
	.nav {
		width: 2.4rem;
	}
</style>